<template>
  <!-- 资产管理-档案管理首页 -->
  <div class="assetFilesPage">
    <div class="content">
      <div class="searchBox">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.searchVal"
              placeholder="输入资产名"
              maxlength="32"
              style="width: 344px"
            />
          </el-form-item>
          <el-form-item label="资产类型">
            <el-select
              v-model="searchForm.assetsTypeVal"
              clearable
              style="width: 135px"
            >
              <el-option
                v-for="item in assetsTypeOptionsArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              color="#FF7B50"
              style="color: #fff"
              type="primary"
              @click="doSearch"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!-- 按钮组 -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="margin-bottom: 33px"
      >
        <el-form-item v-for="(n, i) in btnStateArr" :key="i">
          <el-button
            :class="btnStatekey == i?'button_view':'button_edit'"
            type="primary"
            @click="stateChange(i)"
            >{{ n.btnName }}</el-button
          >
        </el-form-item>
        <!-- <el-form-item class="f-r">
          <el-button
            class="button_delete"
            type="primary"
            @click="setAlert"
            >设置提醒周期</el-button
          >
        </el-form-item> -->
      </el-form>

      <PublicStatistics
        :cardArr="postCardArr"
        getWidth="274px"
      ></PublicStatistics>
      <el-table
        ref="multipleTable"
        class="assetsTabel"
        v-loading="tableLoadingFlag"
        :data="tableState.tableData"
        :span-method="objectSpanMethod"
        :header-row-style="{ background: '#F5F5F5' }"
        :header-cell-style="{
          background: 'none',
          padding: '12px 0',
        }"
        tooltip-effect="dark"
        border
        style="width: 100%; margin-bottom: 23px"
      >
        <el-table-column prop="assetsName" label="资产名称" align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="资产类型"
          width="100"
          align="center"
        >
          <template #default="scope">
            {{
              scope.row.type == 1
                ? "农贸市场"
                : scope.row.type == 2
                ? "商业(绿道)"
                : scope.row.type == 3
                ? "商业(商铺)"
                : scope.row.type == 4
                ? "写字楼"
                : scope.row.type == 5
                ? "综合体"
                : "其他"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="housingAddress" label="资产位置" align="center">
          <template #default="scope">
            {{ scope.row.assetsAddress ? scope.row.assetsAddress : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="assetsIncome"
          label="持有期间收益总额(万元)"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ (scope.row.assetsIncome !== '' && scope.row.assetsIncome !== null) ? (scope.row.assetsIncome/10000).toFixed(2) : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="房源面积及数量" align="center" width="130">
          <template #default="scope">
            {{ scope.row.housingArea }}㎡ ({{ scope.row.housingNum }}个)
          </template>
        </el-table-column>
        <el-table-column label="预警状态" width="130" align="center">
          <template #default="scope">
            {{ scope.row.listobj.remindContent }}
            {{
              scope.row.listobj.assetsArea ? scope.row.listobj.assetsArea : "--"
            }}
            平
          </template>
        </el-table-column>
        <!-- <el-table-column label="最近提醒时间" align="center" width="120">
          <template #default="scope">
            {{
              scope.row.listobj.remindTime ? scope.row.listobj.remindTime : "--"
            }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              class="button_view"
              type="primary"
              @click="goDetail(scope.row.assetsId)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="defualtPageSize"
        :total="tableState.total"
        :page-sizes="[20, 30, 40, 50, 100, 150, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="tableState.currentPage"
        @current-change="pageChang"
        @size-change="sizeChange"
      />
    </div>
    <AlertDialog ref="alertDialogRef"></AlertDialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, shallowRef } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElSelect,
  ElOption,
  ElDivider,
  ElMessage,
  ElMessageBox,
  ElDialog,
} from "element-plus";
import { useRouter } from "vue-router";
import { assetsTypeOptionsArr } from "@/common/dict/dictCollect";
import PublicStatistics from "@/components/PublicStatistics.vue";
import AlertDialog from "./components/alertDialog.vue";
import { numToFixed } from "@/common/utils/GlobalUtils";
import { assetFilesApi } from "@/api/assets";
const router = useRouter();

// 搜索
const searchForm = reactive({
  searchVal: null,
  assetsTypeVal: null,
});
const doSearch = () => {
  const params = {
    assetsName: searchForm.searchVal,
    type: searchForm.assetsTypeVal,
    assetsType: btnStatekey.value + 1,
  };
  initTableData(params);
};

// 状态切换按钮
const btnStatekey = ref(0); // 1-全部；2-空闲资产；3-即将到期
const btnStateArr = ref([
  {
    btnName: "全部",
  },
  {
    btnName: "空闲资产",
  },
  {
    btnName: "即将到期",
  },
]);
const stateChange = (i) => {
  tableState.tableData = [];
  btnStatekey.value = i;
  const params = {
    assetsName: searchForm.searchVal,
    type: searchForm.assetsTypeVal,
    assetsType: btnStatekey.value + 1,
  };
  switch (i) {
    case 0:
      initDefaultAmountData(params);
      postCardArr.value = cardInfoArr.defaultCard;
      break;
    case 1:
      initFreeAmountData(params);
      postCardArr.value = cardInfoArr.freeCard;
      break;
    case 2:
      initExpireAmountData(params);
      postCardArr.value = cardInfoArr.exPireCard;
      break;
    default:
      break;
  }
  initTableData(params);
};
const postCardArr = ref([]);
const cardInfoArr = reactive({
  defaultCard: [
    {
      title: "资产建筑面积",
      num: "0.00",
      url: require("@/assets/iconImg/zichanmj.png"),
      unit: "㎡",
    },
    {
      title: "空闲面积",
      num: "0.00",
      url: require("@/assets/iconImg/jianzhumj.png"),
      unit: "㎡",
    },
    {
      title: "即将到期面积",
      num: "0.00",
      url: require("@/assets/iconImg/keyongmj.png"),
      unit: "㎡",
    },
    {
      title: "未到期面积",
      num: "0.00",
      url: require("@/assets/iconImg/zichanmj.png"),
      unit: "㎡",
    },
    {
      title: "持有期间已获得资金",
      num: "0.00",
      url: require("@/assets/iconImg/zichan.png"),
      unit: "元",
    },
  ],
  freeCard: [
    {
      title: "空闲资产数量",
      num: "0",
      url: require("@/assets/iconImg/zichanzs.png"),
      unit: "个",
    },
    {
      title: "空闲房源数量",
      num: "0",
      url: require("@/assets/iconImg/fangyuanzs.png"),
      unit: "个",
    },
    {
      title: "空闲面积",
      num: "0.00",
      url: require("@/assets/iconImg/jianzhumj.png"),
      unit: "㎡",
    },
  ],
  exPireCard: [
    {
      title: "即将到期资产数量",
      num: "0",
      url: require("@/assets/iconImg/zichanzs.png"),
      unit: "个",
    },
    {
      title: "即将到期房源数量",
      num: "0",
      url: require("@/assets/iconImg/fangyuanzs.png"),
      unit: "个",
    },
    {
      title: "即将到期面积",
      num: "0.00",
      url: require("@/assets/iconImg/jianzhumj.png"),
      unit: "㎡",
    },
    {
      title: "即将到期月租金",
      num: "0.00",
      url: require("@/assets/iconImg/daoqizj.png"),
      unit: "元",
    },
  ],
});

// table相关
const defualtPageSize = ref(50);
const tableLoadingFlag = ref(false);
const tableState = reactive({
  tableData: [],
  total: 0, // 总条数
  currentPage: 1, // 当前页
});
// 表格合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex <= 4) {
    // 列数小于4
    if (rowIndex % 3 === 0) {
      // 合并2行
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  if (columnIndex === 7) {
    if (rowIndex % 3 === 0) {
      // 合并2行
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
const pageChang = (val) => {
  tableState.currentPage = val;
  initTableData();
};
const sizeChange = (val) => {
  defualtPageSize.value = val;
  initTableData();
};

const initTableData = (paramObj) => {
  let getParams = {
    pageNum: tableState.currentPage,
    pageSize: defualtPageSize.value,
    param: { ...paramObj },
  };
  tableLoadingFlag.value = true;
  assetFilesApi.getAllAssetsFiles(getParams).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      tableState.total = data.totalSize;
      let newTableArr = [];
      if (data.content.length) {
        data.content.map((n, i) => {
          if (n.list.length) {
            tableArrChange(n, n.list, newTableArr);
          } else {
            n.list = [
              {
                assetsArea: null,
                remindContent: "即将到期",
                remindTime: null,
                type: 2,
              },
              {
                assetsArea: null,
                remindContent: "未到期",
                remindTime: null,
                type: 3,
              },
              {
                assetsArea: null,
                remindContent: "空闲",
                remindTime: null,
                type: 1,
              },
            ];
            tableArrChange(n, n.list, newTableArr);
          }
        });
        tableState.tableData = newTableArr;
      }
      tableLoadingFlag.value = false;
    } else {
      tableLoadingFlag.value = false;
    }
  });
};
// table数据转换
const tableArrChange = (item, fromArr, toArr) => {
  fromArr.map((m, j) => {
    let myObj = {
      assetsArea: m.assetsArea,
      remindContent:
        m.type == 3
          ? "未到期"
          : m.type == 2
          ? "即将到期"
          : "空闲",
      remindTime: m.remindTime,
      type: m.type,
    };
    let changeObj = {
      listobj: { ...myObj },
      ...item,
    };
    toArr.push(changeObj);
  });
};

// 初始获取默认资产
const initDefaultAmountData = (param) => {
  assetFilesApi.statisticalArea(param).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      if (data.assetsArea) {
        // 资产面积
        cardInfoArr.defaultCard[0].num = numToFixed(data.assetsArea, 2).split(
          "&"
        )[0];
        cardInfoArr.defaultCard[0].unit = numToFixed(data.assetsArea, 2).split(
          "&"
        )[1]
          ? numToFixed(data.assetsArea, 2).split("&")[1] + "㎡"
          : cardInfoArr.defaultCard[0].unit;
      }
      if (data.idleArea) {
        // 空闲面积
        cardInfoArr.defaultCard[1].num = numToFixed(data.idleArea, 2).split(
          "&"
        )[0];
        cardInfoArr.defaultCard[1].unit = numToFixed(data.idleArea, 2).split(
          "&"
        )[1]
          ? numToFixed(data.idleArea, 2).split("&")[1] + "㎡"
          : cardInfoArr.defaultCard[1].unit;
      }
      if (data.dueSoonArea) {
        // 即将到期面积
        cardInfoArr.defaultCard[2].num = numToFixed(data.dueSoonArea, 2).split(
          "&"
        )[0];
        cardInfoArr.defaultCard[2].unit = numToFixed(data.dueSoonArea, 2).split(
          "&"
        )[1]
          ? numToFixed(data.dueSoonArea, 2).split("&")[1] + "㎡"
          : cardInfoArr.defaultCard[2].unit;
      }
      if (data.unexpiredArea) {
        // 未到期面积
        cardInfoArr.defaultCard[3].num = numToFixed(
          data.unexpiredArea,
          2
        ).split("&")[0];
        cardInfoArr.defaultCard[3].unit = numToFixed(
          data.unexpiredArea,
          2
        ).split("&")[1]
          ? numToFixed(data.unexpiredArea, 2).split("&")[1] + "㎡"
          : cardInfoArr.defaultCard[3].unit;
      }
      if (data.obtainedFunds) {
        // 获取的资金
        cardInfoArr.defaultCard[4].num = numToFixed(
          data.obtainedFunds,
          2
        ).split("&")[0];
        cardInfoArr.defaultCard[4].unit = numToFixed(
          data.obtainedFunds,
          2
        ).split("&")[1]
          ? numToFixed(data.obtainedFunds, 2).split("&")[1] + "元"
          : cardInfoArr.defaultCard[4].unit;
      }
    }
  });
};

// 初始获取空闲资产
const initFreeAmountData = (param) => {
  assetFilesApi.statisticalIdle(param).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      if (data.idleAssetsNum) {
        // 空闲资产数
        cardInfoArr.freeCard[0].num = numToFixed(data.idleAssetsNum).split(
          "&"
        )[0];
        cardInfoArr.freeCard[0].unit = numToFixed(data.idleAssetsNum).split(
          "&"
        )[1]
          ? numToFixed(data.idleAssetsNum).split("&")[1] + "个"
          : cardInfoArr.freeCard[0].unit;
      }
      if (data.idleHusingNum) {
        // 空闲房源数
        cardInfoArr.freeCard[1].num = numToFixed(data.idleHusingNum).split(
          "&"
        )[0];
        cardInfoArr.freeCard[1].unit = numToFixed(data.idleHusingNum).split(
          "&"
        )[1]
          ? numToFixed(data.idleHusingNum).split("&")[1] + "个"
          : cardInfoArr.freeCard[1].unit;
      }
      if (data.idleArea) {
        // 空闲面积
        cardInfoArr.freeCard[2].num = numToFixed(data.idleArea, 2).split(
          "&"
        )[0];
        cardInfoArr.freeCard[2].unit = numToFixed(data.idleArea, 2).split(
          "&"
        )[1]
          ? numToFixed(data.idleArea, 2).split("&")[1] + "㎡"
          : cardInfoArr.freeCard[2].unit;
      }
    }
  });
};

// 初始获取即将到期资产
const initExpireAmountData = (param) => {
  assetFilesApi.statisticalDueSoon(param).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      if (data.dueSoonAssetsNum) {
        // 即将到期资产
        cardInfoArr.exPireCard[0].num = numToFixed(data.dueSoonAssetsNum).split(
          "&"
        )[0];
        cardInfoArr.exPireCard[0].unit = numToFixed(
          data.dueSoonAssetsNum
        ).split("&")[1]
          ? numToFixed(data.dueSoonAssetsNum).split("&")[1] + "个"
          : cardInfoArr.exPireCard[0].unit;
      }
      if (data.dusSoonHusingNum) {
        // 即将到期房源数量
        cardInfoArr.exPireCard[1].num = numToFixed(data.dusSoonHusingNum).split(
          "&"
        )[0];
        cardInfoArr.exPireCard[1].unit = numToFixed(
          data.dusSoonHusingNum
        ).split("&")[1]
          ? numToFixed(data.dusSoonHusingNum).split("&")[1] + "个"
          : cardInfoArr.exPireCard[1].unit;
      }
      if (data.dusSoonMonthlyRent) {
        // 即将到期月租金
        cardInfoArr.exPireCard[3].num = numToFixed(
          data.dusSoonMonthlyRent,
          2
        ).split("&")[0];
        cardInfoArr.exPireCard[3].unit = numToFixed(
          data.dusSoonMonthlyRent,
          2
        ).split("&")[1]
          ? numToFixed(data.dusSoonMonthlyRent, 2).split("&")[1] + "元"
          : cardInfoArr.exPireCard[3].unit;
      }
    }
  });
};

const goDetail = (id) => {
  router.push({
    path: "/asset/management/fileDetail/" + id,
  });
};

// 弹窗相关
const alertDialogRef = ref(null);
const setAlert = () => {
  alertDialogRef.value.openDialog();
};

onMounted(() => {
  stateChange(0);
});
</script>

<style lang="scss" scoped>
.assetFilesPage {
  .searchBox {
    margin-bottom: 40px;
    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }
      .assetInputBtn:hover {
        background-color: #fff;
        color: $btn-defualt-tx-color;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.assetFilesPage {
  :deep(.assetsTabel) {
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          .cell {
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
